<template>
  <div class="nearby">
    <h2 class="nearby__title">附近店铺</h2>
    <router-link
      :to="`/shop/${item._id}`"
      v-for="item in nearbyList"
      :key="item._id"
    >
      <ShopInfo :item="item" />
    </router-link>

    <!-- <div class="nearby__item" v-for="item in nearbyList" :key="item._id">
      <img class="nearby__item__img" :src="item.imgUrl" />
      <div class="nearby__content">
        <div class="nearby__content__title">{{ item.name }}</div>
        <div class="nearby__content__tags">
          <span class="nearby__content__tag">月售{{ item.sales }}+</span>
          <span class="nearby__content__tag"
            >起送：{{ item.expressLimit }}￥</span
          >
          <span class="nearby__content__tag"
            >基础运费：{{ item.expressPrice }}￥</span
          >
        </div>
        <p class="nearby__content__highlight">
          {{ item.slogan }}
        </p>
      </div>
    </div> -->
  </div>
</template>

<script>
import { ref } from "vue";
import { get } from "../../utils/request";
import ShopInfo from "../../components/ShopInfo.vue";

const useNearbyListEffect = () => {
  const nearbyList = ref([]);
  const getNearByList = async () => {
    const result = await get("/api/shop/hot-list");
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data;
    }
  };
  return { getNearByList, nearbyList };
};

export default {
  name: "Nearby",
  components: { ShopInfo },
  setup() {
    const { getNearByList, nearbyList } = useNearbyListEffect();
    getNearByList();
    return { nearbyList };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  a {
    text-decoration: none;
  }
}
</style>